<template>
  <el-dialog v-model="dialogVisible" title="随机起名" width="800px" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" center align-center destroy-on-close>
    <div class="generate-name">
      <div class="generate-name-type">
        <ul>
          <li v-for="item in nameType" :key="item.type" :class="{ active: nameTypeActive === item.type }" @click="clickNameType(item)">{{ item.name }}</li>
        </ul>
      </div>
      <div class="generate-name-requirement">
        <el-form label-position="top" label-width="100px" :model="formData">
          <el-form-item label="姓氏">
            <el-input v-model="formData.surname" placeholder="请输入或选择" maxlength="4" clearable />
            <div v-if="nameTypeActive === 'chineseName'" class="flex-between">
              <el-button link @click="clickRandomSingleSurname">随机单姓</el-button>
              <el-button link @click="clickRandomCompoundSurname">随机复姓</el-button>
            </div>
            <div v-else-if="nameTypeActive === 'japaneseName'" class="flex-between">
              <el-button link @click="clickRandomSurname">随机姓氏</el-button>
            </div>
          </el-form-item>
          <el-form-item v-if="['chineseName', 'japaneseName', 'westernName'].includes(nameTypeActive)" label="性别">
            <el-radio-group v-model="formData.gender">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="nameTypeActive === 'chineseName'" label="字数">
            <el-radio-group v-model="formData.number">
              <el-radio :label="2">二字名</el-radio>
              <el-radio :label="3">三字名</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="formData.number === 3" label="中间字">
            <el-input v-model="formData.middleWord" placeholder="请输入中间一个字" maxlength="1" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="clickGenerateName" style="width: 100%">生成名字</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="generate-name-result">
        <ul>
          <li v-for="(item, index) in result" :key="index" @click="clickCopy(item)">
            <span>{{ item }}</span>
          </li>
        </ul>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="onClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
/**
 * 随机起名组件，生成中文名，日本名，秘籍，法宝等
 */
import { ref, reactive, watch } from "vue";
import { useVModel, useClipboard } from "@vueuse/core";
import { CHINESE_SURNAME, JAPANESE_SURNAME, FEMALE_NAMES_CHARACTERS, COMMONLY_USED_CHINESE_CHARACTERS } from "@/assets/js/nameResource";
import { ElMessage } from "element-plus";
import "element-plus/es/components/message/style/css";

const { copy, copied, isSupported } = useClipboard();
watch(copied, (e: boolean) => {
  if (e) {
    ElMessage({
      message: "已复制",
      type: "success"
    });
  }
});
// 点击生成的名字，复制文本
const clickCopy = (e: string) => {
  if (isSupported.value) {
    copy(e);
  } else {
    ElMessage({
      message: "不支持复制",
      type: "warning"
    });
  }
};

// let resource = FEMALE_NAMES_CHARACTERS;
// let res = resource.split(",");
// for (let i = 0; i < res.length; i++) {
//   res[i] = res[i].slice(1);
// }
// res = Array.from(new Set(res));
// res = res.join("").split("");
// res = Array.from(new Set(res));
// res = res.join(",");
// console.log(res);

interface Props {
  visible: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  visible: false
});
const emit = defineEmits(["update:visible"]);
const dialogVisible = useVModel(props, "visible", emit);
const onClose = () => {
  dialogVisible.value = false;
};

const nameType = [
  { type: "chineseName", name: "中国人名" },
  { type: "japaneseName", name: "日本人名" },
  { type: "westernName", name: "西方人名" },
  { type: "variousForces", name: "各方势力" },
  { type: "placeName", name: "地名" },
  { type: "secretBook", name: "秘籍" },
  { type: "magicWeapon", name: "法宝" },
  { type: "wonderfulDrugs", name: "灵药" }
];
// 起名类型当前选中项
const nameTypeActive = ref("chineseName");
const clickNameType = (e: any) => {
  nameTypeActive.value = e.type;
};
// 起名条件
const formData = reactive({
  surname: "",
  middleWord: "",
  gender: 1,
  number: 2
});
// 生成名字的结果列表数据
const result: string[] = reactive([]);

// 获取随机姓氏
const getRandomSurname = (num?: number) => {
  let surnameSource = CHINESE_SURNAME;
  if (nameTypeActive.value === "japaneseName") {
    surnameSource = JAPANESE_SURNAME;
  }
  let list = surnameSource.split(",");
  if (num) {
    list = list.filter((ele) => ele.length === num);
  }
  const index = Math.floor(Math.random() * list.length);
  return list[index];
};

// 点击随机单姓
const clickRandomSingleSurname = () => {
  formData.surname = getRandomSurname(1);
};
// 点击随机复姓
const clickRandomCompoundSurname = () => {
  formData.surname = getRandomSurname(2);
};
// 点击随机姓氏
const clickRandomSurname = () => {
  formData.surname = getRandomSurname();
};

// 点击生成名字
const clickGenerateName = () => {
  result.length = 0; // 清空结果列表
  let commonWords = COMMONLY_USED_CHINESE_CHARACTERS.split(",");
  if (formData.gender === 0) {
    commonWords = FEMALE_NAMES_CHARACTERS.split(",");
  }
  for (let i = 0; i < 30; i++) {
    let firstName = "";
    let middleName = formData.middleWord;
    let lastName = "";
    if (formData.surname) {
      firstName = formData.surname;
    } else {
      firstName = getRandomSurname();
    }
    let nameLen = nameTypeActive.value === "japaneseName" ? 2 : formData.number - 1;
    if (middleName) nameLen--;
    for (let i = 0; i < nameLen; i++) {
      const index = Math.floor(Math.random() * commonWords.length);
      lastName += commonWords[index];
    }
    const res = firstName + middleName + lastName;
    result.push(res);
  }
};
</script>

<style lang="scss" scoped>
.generate-name {
  display: flex;
  text-align: center;
  height: 400px;
  ul li {
    list-style: none;
    height: 32px;
    line-height: 32px;
  }
  &-type {
    width: 120px;
    border-right: 1px solid var(--el-border-color);
    ul {
      padding-right: 10px;
      li {
        border-radius: 4px;
        cursor: pointer;
        transition: 0.3s;
        &:hover,
        &.active {
          background-color: var(--el-bg-color-page);
          color: var(--el-color-primary);
        }
      }
    }
  }
  &-requirement {
    width: 180px;
    padding: 0px 10px;
    border-right: 1px solid var(--el-border-color);
    .flex-between {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 5px;
    }
  }
  &-result {
    flex: 1;
    overflow: auto;
    ul {
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        width: 30%;
        margin-bottom: 5px;
        span {
          cursor: pointer;
          display: inline-block;
          min-width: 60px;
          padding: 0px 10px;
          border-radius: 4px;
          &:hover {
            background-color: var(--el-bg-color-page);
          }
        }
      }
    }
  }
}
</style>
